<script setup>
/**
 * 登录页面
 * @lulj3@20250711
 */

import { useRouter } from 'nuxt/app'
const router = useRouter()

const loginForm = reactive({ // 登录信息
  account: '',
  password: '',
  agree: ''
})
// const handleLogin = async () => { // 处理登录的方法
//   const res = await useFetch('/api/submit', {
//     method: 'POST',
//     body: loginForm
//   })
//   console.log(res);
//   console.log("登录事件被触发")
// }
const handleLogin = () => {
  console.log("登录事件被触发")
  router.push("/visualizations")
}
const wechetLogin = () => {
  console.log("微信登录被触发");
  
}
</script>

<template>
  <!-- 整个页面 -->
  <div class="w-screen h-screen bg-gray-50 flex flex-row">
    <!-- 左边的logo部分 -->
    <div class="bg-red-900 basis-2/5">
      <!-- 上半部分的山东大学校徽 -->
      <div class="grid place-items-center h-screen">
        <img src="/public/sdu.png" class="w-48 h-48">
      </div>
    </div>
    <div class="basis-3/5">
      <!-- 登录盒子 -->
      <div class="grid place-items-center h-screen">
        <div class="w-96 h-112 justify-items-center">
          <h1 class="text-black font-bold text-[30px]">隧道施工地质灾害诊断平台</h1>
          <h2  class="mt-5">WELCOME LOGIN</h2>
          <!-- 表单 -->
          <form @submit.prevent="handleLogin">
            <div class="mt-5">            
              <UInput v-model="loginForm.account" placeholder="请输入您的账号" color="neutral" icon="i-lucide-user" size="xl"/>
            </div>
            <div class="mt-5">            
              <UInput v-model="loginForm.password"  placeholder="请输入您的密码" color="neutral" icon="i-lucide-lock" size="xl"/>
            </div>
            <div class="flex items-center mt-4">
              <UCheckbox id="agree" v-model="loginForm.agree" label="同意平台用户协议"  color="neutral"/>
            </div>
            <div class="mt-5" >
              <UButton class="w-full flex items-center justify-center bg-red-900 h-10 hover:bg-red-800 cursor-pointer" @click="handleLogin">
                登 录
              </UButton>
            </div>
          </form>
          <div class="flex items-center justify-center w-90 h-8 border-t-1 border-gray-300 mt-8 pt-2">
            <h6 class="text-gray-400 text-sm">
              如果您还没有账号，
              <a href="#" class="text-red-800">请点击此处进行注册</a>
            </h6>
          </div>
          <div class="w-full flex items-center justify-center pt-5">
            <img class="w-7 cursor-pointer" src="../public/icons8-wechat-500.svg" @click="wechetLogin">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
